<template>
	<div class="login-modal" 
	:style="{background: 'rgba(0,0,0,' + opacity + ')' }" 
	@tap="clear" 
	v-if="showModal">
		
		<div class="login-content" :style="{transform: 'translateY('+ translateY + ')'}">
			<div class="content-info">

				<div class="info-top">
					<div class="clear">
						<span class="ma icon-guanbi1" @tap="clear"></span>
					</div>
					<div>
						<p class="title">欢迎登录来了站长</p>
						<p class="title2" style="padding-top:1.07vw">登录即享有查看数据、管理社区等操作权限</p>
					</div>
				</div>
				<div class="wxlogin" @tap="onLogin">微信一键登录</div>
				<div class="tip">点击登录来了站长，即表示已阅读并同意<span>《隐私政策》</span>与<span>《服务条款》</span></div>
				<div class="content-bottom"></div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'ma-login-modal',
		data() {
			return {
				showModal: false,
				isAuthorization: false,
				code: null,
				opacity: 0,
				translateY: '100%'
			}
		},
		methods: {
			openModal(){
				if(this.showModal) return;
				this.showModal = true;
				this.$nextTick(() => {
					setTimeout(() => {
						this.translateY = '0';
						this.opacity = 0.6;
					},50)
				})
			},
			closeModal(){
				this.$u.throttle(() => {
					this.translateY = '100%';
					this.opacity = 0
					setTimeout(() => {
						this.showModal = false;
						this.isOpening = false
					},300)
				},500)
			},
			async open() {
				// this.showModal = true;
				this.openModal();
			},
			clear() {
				// this.showModal = false;
				this.closeModal()
				this.user.showLoginModal = false;
			},
			//一键登陆
			async onLogin() {
				this.user.isLogin = true;
				return;
				//已经打开授权框就不再打开
				if (this.isAuthorization) return;
				this.isAuthorization = true;
				uni.getUserProfile({
					desc: '登陆',
					success: async (res) => {
						this.user.userProfile = res;
						// console.log(res)
						if (res.errMsg == 'getUserProfile:ok') {
							//调用请求接口
							await this.$store.dispatch('user/onLogin', {
								vm: this,
								data: res,
								//执行成功与否都关闭弹窗
								complete: () => {
									this.clear();
								},
								//请求成功的回调
								success: async (res) => {
									console.log('登陆成功：', res)
									// this.$store.dispatch('config/getConfigGray',this);
									// let appConfig = await this.$u.api.getAppConfig();
									// console.log('app配置：',appConfig)
								}
							});
						}
					},
					fail: (err) => {
						console.log(err)
					},
					complete: () => {
						this.isAuthorization = false;
					}
				})
			},
		}
	}
</script>
<style lang="scss">
	.login-modal {
		width: 100%;
		position: fixed;
		// background: #FFFFFF;
		top: 0;
		bottom: 0;
		transition: all .3s;
		z-index: 9999;

		.login-content {
			position: absolute;
			bottom: 0;
			// height: 0vw;
			background-color: #FFF;
			padding-top: 6.4vw;
			border-radius: 6vw 6vw 0 0;
			transition: all .3s;
		}

		.content-info {
			padding: 0 5.33vw;
			width: 100vw;
			opacity: 1;
			background: #FFFFFF;

			.info-top {
				padding-top: 4.27vw;
				position: relative;

				.clear {
					position: absolute;
					z-index: 1;
					right: 0;
					bottom: 9vw;

					.icon-guanbi1 {
						font-size: 6.4vw;
					}
				}

				.title {
					color: #070a08;
					font-size: 5.87vw;
					font-weight: 600;
				}

				.title2 {
					color: #BBBBBB;
					font-size: 3.73vw;
					font-weight: 300;
				}
			}

			.wxlogin {
				margin-top: 8.53vw;
				width: 100%;
				height: 10.67vw;
				background: #00C08E;
				box-shadow: 0px 10px 20px rgba(0, 192, 142, 0.32);
				border-radius: 6.4vw;
				font-size: 3.73vw;
				font-weight: 500;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
			}

			.tip {
				padding: 4.27vw 2.27vw 4.27vw 3.47vw;
				text-align: center;
				font-size: 2.67vw;
				font-weight: 300;
				color: #BBBBBB;
				line-height: 4.73vw;

				span {
					color: #00C08E;
					font-size: 2.67vw;
					font-weight: 300;
				}
			}
		}
	}
</style>
